<template>
<div>
  <div class="login" v-show="login">
      
    <div id="head">MusicPlayer</div>
    <img id="login-pic" src="../assets/logo.png">

    <div id="text">
      <input type="text" placeholder="用户名" v-model="inputUser" id="id">
    </div>

    <div id="password">
      <input type="password" placeholder="密码" @keyup.enter="toShow" v-model="inputPass" id="pass">
    </div>

    <div class="right" @click="toShow">登录</div>
    <div class="left" @click="toEnrol">注册</div>
</div>
    <div class="login" v-show="enrol">
          
        <div id="head">MusicPlayer</div>
        <img id="login-pic" src="../assets/logo.png">

        <div id="text">
          <input type="text" placeholder="输入要注册的用户名" v-model="zcuser" id="id">
        </div>
        <div id="password">
          <input type="password" placeholder="输入要注册的密码" v-model="zcpassward" id="pass">
        </div>

        <div class="left" @click="toReturn">返回</div>
        <div class="right" @click="toEnrol1">注册</div>
    </div>
</div>
</template>
<!-- 引入组件库 -->
<script>
import app from '../App.vue'
  export default {
    data(){
        return{
            user:"123456",
            passward:"123456",
            inputUser:"",
            inputPass:"" ,
            login:1,
            enrol:0,
            zcuser:"",
            zcpassward:"",
            }
    },
    methods: {
      toShow(){
            if(this.inputUser==this.user&this.inputPass==this.passward){
                this.$parent.showIs = 0
  
                
                                // console.log(this.$parent.$children[3]);
                // console.log(app)
                // this.$parent.loginflag=true
                // console.log(this.$parent.loginflag);
            }else{
                alert('用户名或密码错误')
            }
      },
      toEnrol(){
        this.enrol=1,
        this.login=0
      },
      toReturn(){
        this.enrol=0,
        this.login=1
      },
      toEnrol1(){
        this.user=this.zcuser,
        this.passward=this.zcpassward,
        alert('注册成功')
        this.enrol=0,
        this.login=1
      }
    }
  }

</script>
<style scoped>

#head{
  color: rgb(255, 255, 255,0.7);
  font-size: 20px;
  position: absolute;
  left: 700px;
  top: 180px;
}

  #login-pic{
    border-radius: 50%;
    width: 100px;
    position: absolute;
    left: 708px;
    top: 70px;
  }

  
  #text,#password {
    position: absolute;
    top: 200px;
    left: 560px;
    width: 400px;
    height: 55px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 30px;
    margin: 50px 0px;
  }
  #password{
    top: 290px;
  }


  input {
    position: absolute;
    left: 2%;
    top: 17%;
    width: 80%;
    height: 64%;
    background: transparent;
    /* border-radius: 5px; */
    font-size: 14px;
    border: none;
    /* border: 2px solid rgba(255, 255, 255, 0.3); */
    color: rgb(255, 255, 255, 0.7);
    padding: 0 7%;
    outline: none;
    letter-spacing: 3px;
  }
  
  .border {
    /* border: solid 2px rgb(255, 255, 255,0.3); */
    position: absolute;
    left: 2%;
    top: 20%;
    width: 95%;
    height: 55%;
    border-radius: 5px;
  }
  .left{
    position: absolute;
    left: 560px;
    top: 450px;
    background: rgb(0,0,0,0.3);
    width: 80px;
    height: 20px;
    border-radius: 30px;
    padding: 15px;
    text-align: center;
    color: rgb(255, 255, 255, 0.7);
  }
  .right{
   position: absolute;
   left: 850px;
   top: 450px;
   background: rgb(0,0,0,0.3);
    width: 80px;
    height: 20px;
    border-radius: 30px;
    padding: 15px;
    text-align: center;
    color: rgb(255, 255, 255, 0.7);
 }
</style>
